<template>
    <layout>
        <div class="com_data">
            <div class="img_bg"  @click="success('1')" style="background-image: url('http://img-test.zzyuu.com/edu/img/community_banner.png'); background-repeat: no-repeat; background-size: 100% 100%;">

                <div class="mark_box"></div>
                <mt-header title="">
                    <a href="javascript:window.history.go(-1);" slot="left">
                        <mt-button icon="back"></mt-button>
                    </a>

                </mt-header>

                <div class="clear_left">
                    <img :src="showImage(topic.icon, '')"/>
                </div>

                <div class="top_c">
                    <div class="titlec">{{topic.name}}</div>
                    <div class="time">人气{{topic.browseCount}} 帖子{{topic.postCount}}</div>
                </div>

                <div class="top_r">

                    <div v-if="topic.collectionId" class="icon-yishoucang" @click="collect"></div>
                    <div v-show="isShow" v-else="topic.collectionId" class="icon-shoucang" @click="collect"></div>
                    <div v-show="isNone" class="icon-yishoucang" ></div>


                </div>
            </div>
            <div class="top_bt">
                <div class="bt_l">活跃用户 {{topic.userCount}}</div>
                <div class="bt_r">
                    <div v-for="member in topic.userInfoDTOs"><img :src="showImage(member.headImgUrl, '?x-oss-process=image/resize,m_fixed,h_50,w_50')" /></div>
                </div>
            </div>
            <div class="xianxuan" id="tabBar" :class="{ fixed : tabBarFixed}">
                <mt-navbar v-model="selected">
                    <mt-tab-item class="fonts" id="1">最新帖子</mt-tab-item>
                    <mt-tab-item class="fonts" id="2">热门帖子</mt-tab-item>
                    <mt-tab-item class="fonts" id="3">毛笔问答</mt-tab-item>
                </mt-navbar>
            </div>

            <div class="list_box">
                <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
                    <ul class="active_w"
                        v-infinite-scroll="loadMore"
                        infinite-scroll-distance="50" id="content">

                            <template v-if="selected == '3'">
                                <li v-for="item in list">
                                    <a :href="'/answer/detail/' + item.id" class="conetnt">
                                        <div class="comtent_top">
                                            <div class="comtent_l"><img :src="showImage(item.headImgUrl, '?x-oss-process=image/resize,m_fixed,h_100,w_100')"/></div>
                                            <div class="comtent_c">{{ item.name }}</div>
                                            <div class="comtent_r">
                                            </div>
                                        </div>
                                        <div class="meark">
                                            <div class="c_top">{{ item.title }}</div>
                                            <div class="c_img" v-if="item.images.length > 0">

                                                <img v-for="img in item.images"  v-if="item.images.length < 2" style="height: 3.6rem;"  :src="showImage(img, '?x-oss-process=image/resize,m_lfit,w_400')"/>

                                                <img v-for="img in item.images"  v-if="item.images.length > 1" style="height: 1.6rem;"  :src="showImage(img, '?x-oss-process=image/resize,m_lfit,w_300')"/>

                                            </div>

                                            <div class="c_fot">
                                                <div class="c_left">
                                                    <div>2356赞</div>
                                                    <div>10086评论</div>
                                                </div>
                                                <div class="c_right">回答21</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </template>

                            <template v-else>
                                <li v-for="item in list">
                                    <a :href="'/forum/detail/' + item.id" class="conetnt">
                                        <div class="comtent_top">
                                            <div class="comtent_l"><img :src="showImage(item.headImgUrl, '?x-oss-process=image/resize,m_fixed,h_100,w_100')"/></div>
                                            <div class="comtent_c">{{ item.name }}</div>
                                            <div class="comtent_r">
                                            </div>
                                        </div>
                                        <div class="meark">
                                            <div class="c_top">{{ item.title }}</div>
                                            <div class="c_img" v-if="item.images.length > 0">

                                                <img v-for="img in item.images"  v-if="item.images.length < 2" style="height: 3.6rem;"  :src="showImage(img, '?x-oss-process=image/resize,m_lfit,w_400')"/>

                                                <img v-for="img in item.images"  v-if="item.images.length > 1" style="height: 1.6rem;"  :src="showImage(img, '?x-oss-process=image/resize,m_lfit,w_300')"/>

                                            </div>
                                            <div class="c_fot">
                                                <div class="c_left">
                                                    <div>{{ item.postLikeCount }}赞</div>
                                                    <div>{{ item.commentCount }}评论</div>
                                                </div>
                                                <div class="c_right">{{ item.createDate }}</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </template>



                    </ul>
                    <p v-show="loading" class="page-infinite-loading">
                        <mt-spinner :size="20" type="fading-circle"></mt-spinner>
                        <span>加载中...</span>
                    </p>
                </div>
            </div>

        </div>

        <button type="button" class="back-top small" @click="backTop()" v-show="backTopShow">
        <img :src="showImage('edu/img/tops.png')">

        </button>

		<div class="footer">
			<div class=""><a :href="'/forum/post/add?forumId=' + topic.id + '&typeName=1'"><img :src="showImage('edu/img/f_l.png')" /> <p>发帖子</p></a></div>
            <div class=""><a :href="'/forum/post/add?forumId=' + topic.id + '&typeName=2'"><img :src="showImage('edu/img/f_r.png')"  /> <p>提问</p></a></div>
		</div>

    </layout>
</template>
<style lang="scss">
    @import "index";
    .fixed {
        position:fixed;
        top:0;
        z-index:9999;
    }
    .back-top {
        position: fixed;
        right: 10px;
        width: 1rem;
        height: 1rem;
        background: none;
        border:none;
        border-radius: 50%;
        bottom: 110px;
        margin: 0;
        padding: 0;
        img {
            opacity: 0.7;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }

</style>
<script type="text/babel">
    import { api, image } from 'framework/config.js';
    import Layout from "component/layout/standard";

    import Vue from 'vue'
    import Mint from 'mint-ui';
    Vue.use(Mint);

    export default {
        components: {
            Layout
        },
        data(){
            return {
                backTopShow:false,
                loading: false,
                wrapperHeight: 0,
                list:[],
                selected: '1',



				show:[
					{data:"1"}
				],


                isShow:true,
                isNone:false,

                tabBarFixed: false,
                newList: {
                    list: [],
                    lastPage: false,
                    pageNo: 0,
                    nextPage: 1,
                    loading: false,
                    wrapperHeight: 0,
                },
                hotList: {
                    list: [],
                    lastPage: false,
                    pageNo: 0,
                    nextPage: 1,
                    loading: false,
                    wrapperHeight: 0,
                },
                answerList: {
                    list: [],
                    lastPage: false,
                    pageNo: 0,
                    nextPage: 1,
                    loading: false,
                    wrapperHeight: 0,
                },
            }
        },
        computed: {
            api(){
                return api();
            }
        },
        watch: {
            selected: function () {
                let scrollHeight = 0;
                if (this.selected == '2'){
                    this.list = this.hotList.list;
                    scrollHeight = this.hotList.scrollHeight;
                }else if (this.selected == '3'){
                    this.list = this.answerList.list;
                    scrollHeight = this.answerList.scrollHeight;
                }else{
                    this.list = this.newList.list;
                    scrollHeight = this.newList.scrollHeight;
                }
                if (this.list.length == 0){
                    window.scrollTo(0, 0);
                    this.loadMore();
                }
            }
        },
        methods: {
            success(type){
                if ('2' == type){
                    this.selected = '3'
                    this.answerList.list = [];
                    this.answerList.nextPage = 1;
                    this.answerList.pageNo = 1;
                }else{
                    this.selected = '1'
                    this.newList.list = [];
                    this.newList.nextPage = 1;
                    this.newList.pageNo = 1;
                }

                window.scrollTo(0, 0);
                this.loadMore();
            },
            backTop() {
                let back = setInterval(() => {
                    if(document.body.scrollTop||document.documentElement.scrollTop){
                        document.body.scrollTop-=100;
                        document.documentElement.scrollTop-=100;
                    }else {
                        clearInterval(back)
                    }
                });
            },

            showImage(url, params){
                return image(this.api.image, url, params);
            },
            change(type){
            },
            loadMore(){
                if (this.loading){
                    return;
                }
                if (this.selected == '2'){
                    if (this.hotList.lastPage){
                        return;
                    }
                    this.loading = true;
                    this.$http.get('/api/post/list', {
                        params: {
                            id: this.currentId,
                            type: this.selected,
                            pageNo: this.hotList.nextPage
                        }
                    }).then((response) => {
                        if (response.status == 200){
                            let data = response.data;
                            if (data.code == 200) {
                                data = data.data;
                                this.hotList.lastPage = data.lastPage;
                                this.hotList.pageNo = data.pageNo;
                                this.hotList.nextPage = data.nextPage;

                                let list = data.list;
                                for (let i = 0; i < list.length; i++){
                                    this.hotList.list.push(list[i]);
                                }
                                this.list = this.hotList.list;
                            }

                        }else{
                            this.hotList.lastPage = true;
                        }
                        this.loading = false;
                    });
                }else if (this.selected == '3'){
                    if (this.answerList.lastPage){
                        return;
                    }
                    this.loading = true;
                    this.$http.get('/api/post/list', {
                        params: {
                            id: this.currentId,
                            type: this.selected,
                            pageNo: this.answerList.nextPage
                        }
                    }).then((response) => {
                        if (response.status == 200){
                            let data = response.data;
                            if (data.code == 200) {
                                data = data.data;
                                this.answerList.lastPage = data.lastPage;
                                this.answerList.pageNo = data.pageNo;
                                this.answerList.nextPage = data.nextPage;

                                let list = data.list;
                                for (let i = 0; i < list.length; i++){
                                    this.answerList.list.push(list[i]);
                                }
                                this.list = this.answerList.list;
                            }

                        }else{
                            this.answerList.lastPage = true;
                        }
                        this.loading = false;
                    });
                }else{
                    if (this.newList.lastPage){
                        return;
                    }
                    this.loading = true;
                    this.$http.get('/api/post/list', {
                        params: {
                            id: this.currentId,
                            type: this.selected,
                            pageNo: this.newList.nextPage
                        }
                    }).then((response) => {
                        if (response.status == 200){
                            let data = response.data;
                            if (data.code == 200) {
                                data = data.data;
                                this.newList.lastPage = data.lastPage;
                                this.newList.pageNo = data.pageNo;
                                this.newList.nextPage = data.nextPage;

                                let list = data.list;
                                for (let i = 0; i < list.length; i++){
                                    this.newList.list.push(list[i]);
                                }
                                this.list = this.newList.list;
                            }

                        }else{
                            this.newList.lastPage = true;
                        }
                        this.loading = false;
                    });
                }
            },
            handleScroll () {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                var offsetTop = document.querySelector('#tabBar').offsetTop;

                if (scrollTop > offsetTop) {
                    this.tabBarFixed = true
                } else {
                    this.tabBarFixed = false
                }

                if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
                    this.backTopShow=true;
                }
                else {
                    this.backTopShow=false;
                }

            },
            collect(){
                let param = new URLSearchParams();
                param.append("type", 1);
                param.append("id", this.topic.id);
                this.$http.post('/api/collect/add',
                    param
                ).then((response) => {
                    if (response.status == 200){
                        let data = response.data;
                        if (data.code == 200) {
                            Mint.Toast('收藏成功');

                            this.isShow=false
                            this.isNone=true

                        } else {
                            Mint.Toast(data.message);
                        }
                    }else{



                    }
                })
            }
        },
        created(){
        },

        mounted() {
            window.success = this.success;
            this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
            window.addEventListener('scroll', this.handleScroll)
        },
        destroyed () {
            window.removeEventListener('scroll', this.handleScroll)
        }
    }
</script>

